<!--<template>
  <div class="mentor-add">
    <VSearch placeholder="请搜索老师姓名" @search="onSearch" />
    <TabListSelect ref="vTabListSelect" @change="onChange" />
    <div class="table">
      <div class="t-box">
        <div class="h-bg">
        </div>
        <table>
          <thead>
            <tr class="caption">
              <th>老师</th>
              <th>科目</th>
              <th>工号</th>
              <th>操作</th>
            </tr>
          </thead>
          <tbody @click="applyMentor">
            <tr v-for="d of listData" :key="d.user_id + d.subject_id">
              <td class="name">{{d.user_name}}</td>
              <td>{{d.subject_name}}</td>
              <td>{{d.teacher_code}}</td>
              <td>
                {{d.state===1?'已同意':''}}
                <BaseButton s="green" :_data.prop="d">导师申请</BaseButton>
              </td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
  </div>
</template>-->

<script>
import BaseBg from '../BaseBg'
import VSearch from './VSearch'
import TabListSelect from './TabListSelect'
import BaseButton from '../BaseButtonBorder'
import axiosGeneral from '@/modules/ajax-mid/axios-general.js'
import LoaderRefresh from '@/modules/loader-refresh/LoaderRefresh'

export default {
  data () {
    return {
      searchKeyword: '',
      campusId: '',
      gradeId: '',
      subjectId: '',
      listData: [],
      page: 0,

      lRefreshMinHeight: 0
    }
  },
  render () {
    let trs = []
    this.listData.forEach(d => {
      let state = ''
      switch (d.state) {
        case -1:
          state = <BaseButton s="green" domProps_data={d}>导师申请</BaseButton>
          break
        case 0:
          state = <span class="t-btn-str">等待同意</span>
          break
        case 2:
          state = <BaseButton s="red" domProps_data={d}>重新申请</BaseButton>
          break
      }

      function subjects (subjects) {
        let str = ''
        subjects.forEach(s => {
          str += ',' + s.subject_name
        })
        return str.substr(1)
      }

      trs.push(
        <tr key={d.user_id}>
          <td class="name">{d.user_name}</td>
          <td>{subjects(d.subjects)}</td>
          <td>{d.teacher_code}</td>
          <td>
            {state}
          </td>
        </tr>
      )
    })

    return (
      <div class="mentor-add">
        <BaseBg bgc="#fff" />
        <div class="m-top">
          <div class="m-s-box"><VSearch placeholder="请搜索老师姓名" onSearch={this.onSearch} /></div>
          <TabListSelect ref="vTabListSelect" onChange={this.onChange} />
          <div class="m-tb-tit">
            <div class="h-bg">
              <table>
                <thead>
                  <tr class="caption">
                    <th>老师</th>
                    <th>科目</th>
                    <th>工号</th>
                    <th>操作</th>
                  </tr>
                </thead>
              </table>
            </div>
          </div>
        </div>
        <div class="table">
          <LoaderRefresh ref="vLoaderRefresh" onLoad={this.load} minHeight={this.lRefreshMinHeight}>
            <div class="t-box">

              <table>
                <tbody onClick={this.applyMentor}>
                  {trs}
                </tbody>
              </table>
            </div>
          </LoaderRefresh>
        </div>
      </div>
    )
  },
  mounted () {
    this.lRefreshMinHeight = window.innerHeight - 150
  },
  methods: {
    initCampusId () {
      if (!this.campusId) {
        return this.$refs.vTabListSelect.initSelect().then(campusId => {
          this.campusId = campusId
        })
      }

      return new Promise(resolve => { resolve() })
    },
    onChange (campusId, subjectId, gradeId) {
      this.campusId = campusId
      this.subjectId = subjectId
      this.gradeId = gradeId

      this.refresh()
    },
    onSearch (k) {
      this.searchKeyword = k
      this.refresh()
    },
    refresh () {
      this.$refs.vLoaderRefresh.refresh()
    },
    load ({ isRefresh, complete, vLoaderBottom }) {
      this.initCampusId().then(() => {
        let listNum = 20 // 每页条数
        if (isRefresh) { // 刷新情况
          this.page = 0
        }

        let { searchKeyword, campusId, gradeId, subjectId, page } = this
        let queryStr = `?campus_id=${campusId}`
        if (gradeId) queryStr += `&grade_id=${gradeId}`
        if (subjectId) queryStr += `&subject_id=${subjectId}`
        queryStr += `&teacher_user_name=${searchKeyword}`
        queryStr += `&list_mun=${listNum}`
        queryStr += `&offset=${page * listNum}`
        // axiosGeneral.get(`/lecture/v1/teachers${queryStr}`).then(data => {
        //   if (isRefresh) { // 刷新情况
        //     if (data && data.success) {
        //       this.listData = data.teachers
        //     }

        //     // 刷新完成
        //     complete()
        //   } else { // 加载情况
        //     if (data && data.success) {
        //       let { teachers } = data
        //       this.listData = this.listData.concat(teachers)
        //       complete(teachers.length < listNum)
        //       this.page++
        //     } else {
        //       complete(1)
        //     }
        //   }
        // })
        this.$axios.get(`/lecture/v1/teachers${queryStr}`).then(({ data }) => {
          if (data.status === 200) {
            data = data.result
            if (isRefresh) { // 刷新情况
              if (data.success) {
                this.listData = data.teachers
                this.page++
              }

              // 刷新完成
              complete()
            } else { // 加载情况
              if (data.success) {
                let { teachers } = data
                this.listData = this.listData.concat(teachers)
                complete(teachers.length < listNum)
                this.page++
              } else {
                complete(1)
              }
            }
          } else {
            this.$toast.error(data.message)
          }
        }).catch(e => { this.$toast.error(e.message) })
      }).catch(e => {
        this.$toast.error(e.message)
        complete(1)
      })
    },
    applyMentor (e) {
      let { target } = e
      if (target.tagName === 'BUTTON') {
        let d = target._data
        axiosGeneral.get(`/lecture/v1/teacherRequest?teacher_user_id=${d.user_id}`).then(data => {
          if (data) {
            if (data.success) {
              d.state = 0
              this.$toast.success(`已向${d.user_name}老师发起了申请...`)
            } else {
              this.$toast.error('申请失败')
            }
          }
        })
      }
    }
  },
  components: {
    VSearch,
    TabListSelect,
    BaseButton,
    LoaderRefresh,
    BaseBg
  }
}
</script>

<style scoped>
.m-s-box {
  background-color: #f3f3f4;
  overflow: hidden;
}
.search {
  margin: 10px 15px;
}

.m-top {
  position: fixed;
  top: 0px;
  width: 100%;
  /* background-color: #fff; */
  z-index: 1;
  /* box-shadow: 0px 1px 4px 0px rgba(0, 0, 0, 0.26); */

  .m-tb-tit {
    margin: 0 10px;
    /* position: relative; */
    background-color: #fff;
  }
  .h-bg {
    /* position: absolute;
    width: 100%; */
    /* .h-b {

    } */
    background-image: linear-gradient(to right, #4d9fed, #47c7f7);
    border-radius: 18px;
    box-shadow: 0 5px 9px 1px #ccc;
    /* position: absolute; */
    /* width: 100%; */
    height: 35px;
    /* margin: 0 10px; */
  }
  table {
    width: 100%;
  }
  th {
    width: 25%;
  }
  .caption {
    /* display: block; */
    /* margin-bottom: 20px; */
    height: 35px;
    font-size: 16px;
    line-height: 32px;
    color: #fff;
  }
}

.table {
  padding: 35px 0 20px;
  background-color: #fff;
  margin-top: 111px;
  .t-btn-str {
    display: block;
    padding: 6px 0;
  }
  .b-btn {
    padding: 7px 14px;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 12px;
  }

  .t-box {
    margin: 0 10px;
    position: relative;
  }
}
.table table {
  position: relative;
  width: 100%;
  /* display: block; */
  /* margin: 0 10px; */
  font-size: 14px;
  color: #888;
  table-layout: fixed;
}

/* .table thead,
.table tbody,
.table tr {
  display: block;
} */

.table td {
  /* display: inline-block; */
  width: 25%;
  text-align: center;
  padding-top: 14px;
}

.table .name {
  color: #555;
}
</style>
